<template>
  <div>
    <div class="content-box">
      <div class="left-box">
        <div class="title-box">打印设置</div>
        <div class="filter-btn-box">
          <span class="print-food-btn" :class="activeIndex === 1 ? 'active' : ''" @click="handleAction(1)">打印菜品设置</span>
          <span class="print-bill-btn" :class="activeIndex === 2 ? 'active' : ''" @click="handleAction(2)">打印单据设置</span>
          <span class="print-table-btn" :class="activeIndex === 3 ? 'active' : ''" @click="handleAction(3)">打印桌台区域设置</span>
        </div>
        <div class="tree-box">
          <div v-if="activeIndex === 1"><PrintFood /></div>
          <div v-if="activeIndex === 2"><PrintBill /></div>
          <div v-if="activeIndex === 3"><PrintTable /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import PrintFood from './components/PrintFood.vue'
import PrintBill from './components/PrintBill.vue'
import PrintTable from './components/PrintTable.vue'

const activeIndex = ref(1)
function handleAction(index) { activeIndex.value = index }
</script>

<style lang="scss" src="./modules/Setting.scss" scoped></style>
